<%@page contentType="text/html; charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>产品图片管理</title>
<!-- begin header 头部 -->
<%@include file="include/header.jsp"%>
<link rel="stylesheet" href="${contextPath }/external/fancybox/jquery.fancybox-1.3.4.css" media="screen">
<!-- end header -->
</head>
<body>
	<c:set var="product_images_manager_current" value="active" />
	<!-- begin 导航条 -->
	<%@include file="include/nav.jsp"%>
	<!-- end 导航条 -->
	<div class="row">
		<!-- begin菜单 -->
		<%@include file="include/menu.jsp"%>
		<!-- end菜单 -->
		<div class="span9">
			<div class="row">
				<div class="span7">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>&nbsp;</th>
								<th>图片</th>
								<th>文件名称</th>
								<th>上传时间</th>
							</tr>
						</thead>
						<tbody id="images">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- begin foot 依赖-->
	<%@include file="include/foot.jsp"%>
	<script type="text/javascript" src="${contextPath }/external/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="${contextPath }/external/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	
	<script type="text/javascript">
		var contextPath = '${contextPath}';
		$.ajax({
			type:'GET',
			url:'${contextPath}/list_file.do',
			success: function(data) {
				$.each(data.files, function(i,v){
					var tr = $('<tr></tr>');
					tr.append('<td>' + (i + 1) + "</td>");
					tr.append('<td><a href="' + contextPath + '/serve.jpg?key=' + v.md5_hash + '&width=460&height=253"><img src="http://localhost:8888/serve.do?key=' + v.md5_hash + '&width=40&height=40" class="img-polaroid"/></a></td>');
					tr.append('<td>' + v.filename + '</td>');
					tr.append('<td>' + v.creation + '</td>');
					$('a', tr).fancybox({
						'transitionIn'	: 'elastic',
						'transitionOut'	: 'elastic',
						'centerOnScroll' : true
					});
					$('a', tr).click(function(){
						$('#fancybox-img').attr('src', 'http://localhost:8888/serve.do?key=' + v.md5_hash);
					});
					$('#images').append(tr);
				});
			}
		});
	</script>
	<!-- end foot 依赖 -->
</body>
</html>